<template>
  <div id="console">
    <el-container>
      <el-header id="header">
        <h1>管理系统</h1>
        <el-menu mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
            default-active="1" @select="selectBean">
          <el-menu-item v-for="(item, index) in beanList" :key="item.bean.id" :index="index + 1 + ''">{{ item.bean.name }}</el-menu-item>
        </el-menu>
        <el-tooltip placement="bottom-end" effect="dark" content="Sign Out">
          <form id="logout" method="POST" action="javascript:void(0)" @submit="logout">
            <el-button id="signOutButton" native-type="submit" icon="el-icon-switch-button"></el-button>
          </form>
        </el-tooltip>
      </el-header>
      <el-container>
        <el-aside width="220px">
          <el-menu default-active="1">
            <el-menu-item v-if="!!currentBean" index="1" @click="viewList">列表</el-menu-item>
          </el-menu>
        </el-aside>
        <el-main v-loading="$store.state.loading">
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
    <error-alert :errorMessage="errorMessage" @ok="errorOk"/>
  </div>
</template>

<script>
import http from '../util/http.js';
import elementButton from '../plugins/element/button.js';
import elementContainer from '../plugins/element/container.js';
import elementMenu from '../plugins/element/menu.js';

import ErrorAlert from "../components/ErrorAlert.vue";

const component = {
  name: 'console',
  data () {
    return {
      beanList: [],
      currentBean: null,

      errorMessage: ""
    };
  },
  created () {
    this.$store.commit("setLoading");
    http.get( http.receiveJSON({
      url: "/permission"
    }) ).then(response => {
      this.$store.commit("unsetLoading");
      if (response.data.code === "ok") {
        if (Array.isArray(response.data.content) && response.data.content.length > 0) {
          this.$store.commit("setBeanPermissions", this.beanList = response.data.content);
          this.selectBean("1");
        } else {
          this.errorMessage = "您没有后台管理的权限";
        }
      } else {
        this.errorMessage = response.data.message;
      }
    }).catch(ex => {
      console.error(ex);
      this.$store.commit("unsetLoading");
      this.errorMessage = "查询权限出错";
    });
  },
  methods: {
    selectBean (key) {
      this.currentBean = this.beanList[key - 1];
      this.viewList();
    },
    viewList () {
      this.$router.push({
        name: "bean_list",
        query: {
          id: this.currentBean.bean.id,
          name: this.currentBean.bean.name
        }
      });
    },
    logout () {
      http.post( http.receiveJSON({
        url: "/logout"
      }) ).then(response => {
        console.log(response.data);
        this.$router.push({ name: "login" });
      }).catch(ex => {
        console.error(ex);
        this.$router.push({ name: "login" });
      });
    },
    errorOk () {
      this.errorMessage = "";
    }
  },
  components: {
    ErrorAlert
  }
};

elementButton(component);
elementContainer(component);
elementMenu(component);

export default component;
</script>

<style>
.router_view_header {
  display: flex;
  justify-content: space-between;
}
.router_view_header h1, .router_view_header button.el-button {
  align-self: center;
}
</style>

<style scoped>
header#header {
  display: flex;
  padding-left: 0;
}
header#header>h1 {
  width: 220px;
}
header#header>ul {
  flex-grow: 1;
}

button#signOutButton {
  font-size: 1.4rem;
}

#console {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
#console form#logout > button#signOutButton {
  height: 60px;
}
</style>
